<style>
    .special {
        color: #5E7CE0;
        text-decoration: underline;
    }
    .special:hover {
        color: #7E96E6
    }
</style>

<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main">

        <fieldset class="table-search-fieldset">
            <legend>搜索信息</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form" action="" lay-filter="search-form">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">流水号标识</label>
                            <div class="layui-input-inline">
                                <input type="text" name="idCode" id="idCode" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">流水号名称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="idName" id="idName" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button type="submit" class="layui-btn" lay-submit lay-filter="data-search-btn">
                                <i class="layui-icon layui-icon-search"></i>搜 索
                            </button>
                            <button type="submit" class="layui-btn layui-btn-primary" lay-submit
                                    lay-filter="data-reset-btn">
                                <i class="layui-icon layui-icon-refresh"></i> 重 置
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>
        <div class="layuimini-table">
            <table class="layui-hide" id="idTableTableId" lay-filter="idTableFilter"></table>
        </div>
    </div>
</div>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm data-add-btn" lay-event="add">新增</button>
    </div>
</script>

<script type="text/html" id="currentTableBar">
    <a class="layui-btn layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
</script>

<script type="text/html" id="addDialog">
    <div class="layuimini-form">
        <form class="layui-form" action="" lay-filter="add-form" id="add-form">
            <div class="layui-form-item">
                <label class="layui-form-label required">标识编码</label>
                <div class="layui-input-block">
                    <input type="text" name="idCode" lay-verify="required" lay-reqtext="流水号标识编码不能为空"
                           placeholder="请输入流水号标识编码" value="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">名称</label>
                <div class="layui-input-block">
                    <input type="text" name="idName" lay-verify="required" lay-reqtext="流水号名称不能为空"
                           placeholder="请输入流水号名称" value="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">步长</label>
                <div class="layui-input-block">
                    <input type="number" name="idStep" lay-verify="required" lay-reqtext="流水号步长不能为空" value="100" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">长度</label>
                <div class="layui-input-block">
                    <input type="number" name="idLength" lay-verify="required" lay-reqtext="流水号长度不能为空" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item label-wide">
                <label class="layui-form-label required">是否有前缀</label>
                <div class="layui-input-block">
                    <input type="radio" name="hasPrefix" lay-filter="hasPrefix" value="1" title="是">
                    <input type="radio" name="hasPrefix" lay-filter="hasPrefix" value="0" title="否" checked>
                </div>
            </div>
            <div class="layui-form-item layui-hide" id="idPrefixDiv">
                <label class="layui-form-label">前缀</label>
                <div class="layui-input-group">
                    <input type="text" name="idPrefix" placeholder="请输入流水号前缀" value="" class="layui-input">
                    <div class="layui-input-suffix">
                        <i class="layui-icon layui-icon-tips" id="idPrefixIcon"></i>
                    </div>
                </div>
            </div>
            <div class="layui-form-item label-wide">
                <label class="layui-form-label required">是否有后缀</label>
                <div class="layui-input-block">
                    <input type="radio" name="hasSuffix" lay-filter="hasSuffix" value="1" title="是">
                    <input type="radio" name="hasSuffix" lay-filter="hasSuffix" value="0" title="否" checked>
                </div>
            </div>
            <div class="layui-form-item layui-hide" id="idSuffixDiv">
                <label class="layui-form-label">后缀</label>
                <div class="layui-input-group">
                    <input type="text" name="idSuffix" placeholder="请输入流水号后缀" value="" class="layui-input">
                    <div class="layui-input-suffix">
                        <i class="layui-icon layui-icon-tips" id="idSuffixIcon"></i>
                    </div>
                </div>
            </div>

            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">备注信息</label>
                <div class="layui-input-block">
                    <textarea name="remark" class="layui-textarea" placeholder="请输入备注信息"></textarea>
                </div>
            </div>
            <div class="layui-form-item text-right">
                <button class="layui-btn" lay-submit lay-filter="addSaveBtn">保存</button>
                <button class="layui-btn layui-btn-primary" type="button" lay-filter="closeAddDialog">取消</button>
            </div>
        </form>
    </div>
</script>

<script type="text/html" id="editDialog">
    <div class="layuimini-form">
        <form class="layui-form" action="" lay-filter="edit-form" id="edit-form">
            <div class="layui-form-item">
                <label class="layui-form-label required">标识编码</label>
                <div class="layui-input-block">
                    <div class="layui-form-mid" name="idCode" style="word-break: break-all"></div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">名称</label>
                <div class="layui-input-block">
                    <input type="text" name="idName" lay-verify="required" lay-reqtext="流水号名称不能为空"
                           placeholder="请输入流水号名称" value="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">步长</label>
                <div class="layui-input-block">
                    <input type="number" name="idStep" lay-verify="required" lay-reqtext="流水号步长不能为空" value="100" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">长度</label>
                <div class="layui-input-block">
                    <input type="number" name="idLength" lay-verify="required" lay-reqtext="流水号长度不能为空" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item label-wide">
                <label class="layui-form-label required">是否有前缀</label>
                <div class="layui-input-block">
                    <input type="radio" name="hasPrefix" lay-filter="hasPrefix" value="1" title="是">
                    <input type="radio" name="hasPrefix" lay-filter="hasPrefix" value="0" title="否" checked>
                </div>
            </div>
            <div class="layui-form-item layui-hide" id="idPrefixDiv">
                <label class="layui-form-label">前缀</label>
                <div class="layui-input-group">
                    <input type="text" name="idPrefix" placeholder="请输入流水号前缀" value="" class="layui-input">
                    <div class="layui-input-suffix">
                        <i class="layui-icon layui-icon-tips" id="idPrefixIcon"></i>
                    </div>
                </div>
            </div>
            <div class="layui-form-item label-wide">
                <label class="layui-form-label required">是否有后缀</label>
                <div class="layui-input-block">
                    <input type="radio" name="hasSuffix" lay-filter="hasSuffix" value="1" title="是">
                    <input type="radio" name="hasSuffix" lay-filter="hasSuffix" value="0" title="否" checked>
                </div>
            </div>
            <div class="layui-form-item layui-hide" id="idSuffixDiv">
                <label class="layui-form-label">后缀</label>
                <div class="layui-input-group">
                    <input type="text" name="idSuffix" placeholder="请输入流水号后缀" value="" class="layui-input">
                    <div class="layui-input-suffix">
                        <i class="layui-icon layui-icon-tips" id="idSuffixIcon"></i>
                    </div>
                </div>
            </div>

            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">备注信息</label>
                <div class="layui-input-block">
                    <textarea name="remark" class="layui-textarea" placeholder="请输入备注信息"></textarea>
                </div>
            </div>
            <div class="layui-form-item text-right">
                <button class="layui-btn" lay-submit lay-filter="editSaveBtn">保存</button>
                <button class="layui-btn layui-btn-primary" type="button" lay-filter="closeEditDialog">取消</button>
            </div>
        </form>
    </div>
</script>


<script>
    layui.use(['form', 'table', 'miniAjax'], function () {
        var $ = layui.jquery,
            form = layui.form,
            layer = layui.layer,
            miniAjax = layui.miniAjax,
            table = layui.table;


        var tipStr = "<p>假设当前时间为2024年2月25日3时11分23秒，如果前缀或后缀包含下列字符串</p>" +
            "<p>[yyyy]：生成的流水号将该字符串替换为2024</p>" +
            "<p>[yy]：生成的流水号将该字符串替换为19</p>" +
            "<p>[MM]：生成的流水号将该字符串替换为02</p>" +
            "<p>[dd]：生成的流水号将该字符串替换为25</p>" +
            "<p>[HH]：生成的流水号将该字符串替换为03</p>" +
            "<p>[mm]：生成的流水号将该字符串替换为11</p>" +
            "<p>[ss]：生成的流水号将该字符串替换为23</p>" +
            "<p>以上日期时间字符，yyyyMMddHHmmss，区分大小写</p>";

        var currTable = table.render({
            elem: '#idTableTableId',
            url: '/idtable/query',
            method: 'post',
            contentType: 'application/json',
            request: {
                pageName: 'pageNo',
                limitName: 'pageSize'
            },
            parseData: function (res) {
                return {
                    "code": res.code,
                    "msg": res.msg,
                    "count": res.data.totalCount,
                    "data": res.data.records
                };
            },
            toolbar: '#toolbarDemo',
            defaultToolbar: ['filter', 'exports', 'print'],
            cols: [[
                {field: 'id', width: '6%', title: 'ID', sort: true, align: 'center', fixed: 'left'},
                {
                    field: 'idCode', width: '10%', title: '标识', templet: function (d) {
                        return `<a class="special" href="javascript:;" lay-event="copy" onmouseover="showTip(this)" onmouseleave="closeTip(this)">${d.idCode}</a>`
                    }
                },
                {field: 'idName', width: '10%', title: '名称'},
                {field: 'idValue', width: '10%', title: '当前值', align: 'center'},
                {field: 'idLength', width: '10%', title: '长度'},
                {field: 'idStep', width: '10%', title: '步长' },
                {field: 'idPrefix', width: '10%', title: '前缀'},
                {field: 'idSuffix', width: '10%', title: '后缀'},
                {field: 'createdAt', width: '10%', title: '创建时间'},
                {title: '操作', width: '14%', toolbar: '#currentTableBar', align: "center"}
            ]],
            autoSort: false,
            limits: [10, 15, 20, 25, 50, 100],
            limit: 10,
            page: true,
            skin: 'line'
        });

        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
            // 执行搜索重载
            table.reload('idTableTableId', {
                page: {
                    curr: 1
                },
                where: data.field
            });
            return false;
        });

        // 监听重置操作
        form.on('submit(data-reset-btn)', function (data) {
            form.val("search-form", {
                "idCode": '',
                "idName": ''
            });
            // 执行搜索重载
            currTable.reload({
                page: {
                    curr: 1
                },
                where: form.val("search-form")
            });
            return false;
        });

        /**
         * toolbar事件监听
         */
        table.on('toolbar(idTableFilter)', function (obj) {
            if (obj.event === 'add') { // 监听添加操作
                var index = layer.open({
                    title: '新增流水号',
                    type: 1,
                    shade: 0.2,
                    maxmin: true,
                    shadeClose: false,
                    area: '580px', // 宽度580, 高度自适应
                    content: $('#addDialog').html(),
                    success: function (layero, dIndex) {
                        form.render(null, 'add-form');

                        var tipsIndex1;
                        layero.find("#idPrefixIcon").on("mouseover", function() {
                            tipsIndex1 = layer.tips(tipStr, "#idPrefixIcon", {tips: [2, '#4BB2FF'], time: 50000});
                        }).on("mouseout", function() {
                            layer.close(tipsIndex1);
                        });

                        var tipsIndex2;
                        layero.find("#idSuffixIcon").on("mouseover", function() {
                            tipsIndex2 = layer.tips(tipStr, "#idSuffixIcon", {tips: [2, '#4BB2FF'], time: 50000});
                        }).on("mouseout", function() {
                            layer.close(tipsIndex2);
                        });


                        // 监听layer里面的单选框，哦耶
                        form.on('radio(hasPrefix)', function (data) {
                            // 改变时先清空原来的值
                            form.val('add-form', {"idPrefix": ""});
                            var value = data.elem.value; // 获得 radio 值
                            if (value == "1") {
                                layero.find("#idPrefixDiv").removeClass("layui-hide");
                            } else {
                                layero.find("#idPrefixDiv").addClass("layui-hide");
                            }
                        });

                        // 监听layer里面的单选框，哦耶
                        form.on('radio(hasSuffix)', function (data) {
                            // 改变时先清空原来的值
                            form.val('add-form', {"idSuffix": ""});
                            var value = data.elem.value; // 获得 radio 值
                            if (value == "1") {
                                layero.find("#idSuffixDiv").removeClass("layui-hide");
                            } else {
                                layero.find("#idSuffixDiv").addClass("layui-hide");
                            }
                        });

                        // 表单提交事件
                        form.on('submit(addSaveBtn)', function (data) {
                            miniAjax.postJSON({
                                url: '/idtable/add',
                                data: JSON.stringify(data.field),
                                success: function (res) {
                                    if (res.code == '0') {
                                        layer.msg(res.msg, {time: 1000, icon: 1}, function () {
                                            layer.close(dIndex);
                                        });
                                    } else {
                                        layer.msg(res.msg, {time: 1000, icon: 2});
                                    }
                                }
                            });
                            return false;
                        });

                        // 监听取消按钮
                        $("button[lay-filter='closeAddDialog']").click(function () {
                            layer.close(dIndex);
                            return false;
                        });
                    },
                    end: function (index) {
                        // 重载表格，刷新数据
                        currTable.reload();
                    }
                });
            }
        });

        table.on('tool(idTableFilter)', function (obj) {
            var lineData = obj.data;
            if (obj.event === 'edit') {
                var index = layer.open({
                    title: '编辑流水号',
                    type: 1,
                    shade: 0.2,
                    maxmin: true,
                    shadeClose: false,
                    area: '580px', // 宽度580, 高度自适应
                    content: $('#editDialog').html(),
                    success: function (layero, dIndex) {
                        layero.find("[name='idCode']").text(lineData.idCode);
                        form.render(null, 'edit-form');
                        // 回显表单数据
                        form.val('edit-form', lineData);

                        // 回显特殊选项
                        if (lineData.hasPrefix == '1') {
                            layero.find("#idPrefixDiv").removeClass("layui-hide");
                        }
                        if (lineData.hasSuffix == '1') {
                            layero.find("#idSuffixDiv").removeClass("layui-hide");
                        }

                        var tipsIndex3;
                        layero.find("#idPrefixIcon").on("mouseover", function() {
                            tipsIndex3 = layer.tips(tipStr, "#idPrefixIcon", {tips: [2, '#4BB2FF'], time: 50000});
                        }).on("mouseout", function() {
                            layer.close(tipsIndex3);
                        });

                        var tipsIndex4;
                        layero.find("#idSuffixIcon").on("mouseover", function() {
                            tipsIndex4 = layer.tips(tipStr, "#idSuffixIcon", {tips: [2, '#4BB2FF'], time: 50000});
                        }).on("mouseout", function() {
                            layer.close(tipsIndex4);
                        });

                        // 监听layer里面的单选框，哦耶
                        form.on('radio(hasPrefix)', function (data) {
                            // 改变时先清空原来的值
                            form.val('edit-form', {"idPrefix": ""});
                            var value = data.elem.value; // 获得 radio 值
                            if (value == "1") {
                                layero.find("#idPrefixDiv").removeClass("layui-hide");
                            } else {
                                layero.find("#idPrefixDiv").addClass("layui-hide");
                            }
                        });

                        // 监听layer里面的单选框，哦耶
                        form.on('radio(hasSuffix)', function (data) {
                            // 改变时先清空原来的值
                            form.val('edit-form', {"idSuffix": ""});
                            var value = data.elem.value; // 获得 radio 值
                            if (value == "1") {
                                layero.find("#idSuffixDiv").removeClass("layui-hide");
                            } else {
                                layero.find("#idSuffixDiv").addClass("layui-hide");
                            }
                        });


                        // 表单提交事件
                        form.on('submit(editSaveBtn)', function (data) {
                            data.field.id = lineData.id;
                            miniAjax.postJSON({
                                url: '/idtable/edit',
                                data: JSON.stringify(data.field),
                                success: function (res) {
                                    if (res.code == '0') {
                                        layer.msg(res.msg, {time: 1000, icon: 1}, function () {
                                            layer.close(dIndex);
                                        });
                                    } else {
                                        layer.msg(res.msg, {time: 1000, icon: 2});
                                    }
                                }
                            });
                            return false;
                        });

                        // 监听取消按钮
                        $("button[lay-filter='closeEditDialog']").click(function () {
                            layer.close(dIndex);
                            return false;
                        });
                    },
                    end: function (index) {
                        // 重载表格，刷新数据
                        currTable.reload();
                    }
                });
                return false;
            } else if (obj.event === 'delete') {
                layer.confirm('确定删除此流水号吗', function (index) {
                    layer.close(index);
                    miniAjax.get({
                        url: '/idtable/del?id=' + lineData.id,
                        success: function (res) {
                            if (res.code == '0') {
                                layer.msg(res.msg, {time: 1000, icon: 1}, function () {
                                    // 重载表格，刷新数据
                                    currTable.reload();
                                });
                            } else {
                                layer.msg(res.msg, {time: 1000, icon: 2});
                            }
                        }
                    });
                });
            } else if (obj.event === 'copy') {
                handleClipboard(lineData.idCode)
            }
        });


        function handleClipboard(text) {
            const oInput = document.createElement('input');
            oInput.value = text;
            document.body.appendChild(oInput);
            oInput.select(); // 选择对象
            document.execCommand("Copy"); // 执行浏览器复制命令
            oInput.className = 'oInput';// 设置class名
            document.getElementsByClassName("oInput")[0].remove();// 移除这个input
            layer.msg('已复制到粘贴板');
        }

        var layerTipIndex
        window.showTip = function(t) {
            var row = '点击复制链接';
            //小tips
            layerTipIndex = layer.tips(row,t,{
                tips:[1,'#5E7CE0'],
                time:4000
            })
        }

        window.closeTip = function (t) {
            layer.close(layerTipIndex);
        }
    });
</script>